<template>
  <div class="idea">
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span>客户反馈</span>
      </div>
      <el-row>
        <div class="search-section">
          <el-form :inline="true" :model="pageVo">
            <el-form-item label="处理状态">
              <el-select v-model="pageVo.processStatus" size="small">
                <el-option label="待处理" value="0"></el-option>
                <el-option label="已处理" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注信息">
              <el-input
                      v-model="pageVo.opMark"
                      size="small"
                      style="width: 260px;"
                      placeholder="请输入备注信息，支持模糊搜索"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button size="small" icon="el-icon-search" @click="onSearch"
                >查询</el-button
                >
                <el-button
                        size="small"
                        icon="el-icon-refresh"
                        @click="onClearSearchForm"
                >刷新</el-button
                >
              </el-button-group>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
      <el-row>
        <el-table :data="ideas" border size="small" :load="tableLoading">
          <el-table-column
                  label="序号"
                  type="index"
                  align="center"
                  width="55"
          ></el-table-column>
          <el-table-column label="处理状态" align="center">
            <template slot-scope="scope">
            <span
                    v-if="scope.row.processStatus === 0"
                    style="color: darkred;font-weight: bolder;font-size: 18px;"
            ><i class="el-icon-warning"></i>待处理</span
            >
              <span
                      v-if="scope.row.processStatus === 1"
                      style="color: green; font-weight: bolder;font-size: 18px;"
              ><i class="el-icon-success"></i>已处理</span
              >
            </template>
          </el-table-column>
          <el-table-column label="反馈内容" align="center" prop="content">
          </el-table-column>
          <el-table-column label="反馈图片" align="center" width="300">
            <template slot-scope="scope" v-if="scope.row.images.length > 0">
              <div>
                <el-image
                        style="width:80px;height: auto;margin-right: 8px;"
                        v-for="imagePath in scope.row.images.split(',')"
                        :src="imagePath"
                        :preview-src-list="Array.of(imagePath)"
                        :key="imagePath"
                ></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  label="联系方式"
                  align="center"
                  prop="contact"
          ></el-table-column>
          <el-table-column
                  label="操作员备注"
                  align="center"
                  prop="opMark"
          ></el-table-column>
          <el-table-column label="提交时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | dateFormatMin }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="danger" @click="onShowUpdateIdea(scope.row)"
                >更新</el-button
                >
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
                class="page-section"
                background
                @current-change="onPaging"
                :page-size="pageVo.size"
                @size-change="handleSizeChange"
                :page-sizes="[15, 50, 100, 200]"
                layout="sizes,prev, pager, next"
                :total="pageVo.total"
        />
      </el-row>

    </el-card>

    <!--      更新记录-->
    <el-dialog title="更新反馈" :visible.sync="updateIdeaVisible">
      <el-form :model="ideaModel" label-position="left" label-width="120px">
        <el-form-item label="处理状态">
          <el-switch
            v-model="ideaModel.processStatus"
            :active-value="1"
            :inactive-value="0"
            active-text="已完成"
            inactive-text="待完成"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="操作员备注">
          <el-input type="textarea" v-model="ideaModel.opMark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateIdeaVisible = false">取 消</el-button>
        <el-button type="primary" @click="onUpdateIdea">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getIdeaList, updateIdea } from "@/api/admin-api/BuyerIdeaApi";

export default {
  name: "BuyerIdea",
  data() {
    return {
      updateIdeaVisible: false,
      ideaModel: {
        processStatus: 1,
        opMark: ""
      },
      ideas: [],
      loading: false,
      tableLoading: false,
      pageVo: {
        current: 1,
        size: 20,
        total: 0, //总数量
        pages: 0, //总页数
        orders: [{ column: 'create_time' }], //排序字段
        processStatus: "",
        opMark: ""
      }
    };
  },
  methods: {
    onShowUpdateIdea(row) {
      this.ideaModel = row;
      this.updateIdeaVisible = true;
    },
    onUpdateIdea() {
      this.$loading();
      updateIdea(this.ideaModel).then(() => {
        this.$message.success("操作成功");
        this.loadIdeas();
        this.updateIdeaVisible = false;
        this.$loading().close();
      });
    },
    onPaging(currentPage) {
      this.pageVo.current = currentPage;
      this.loadIdeas();
    },
    handleSizeChange(val) {
      //页大小编号
      this.pageVo.size = val;
      this.loadIdeas();
    },
    onSearch() {
      this.loadIdeas();
    },
    onClearSearchForm() {
      this.pageVo = this.$options.data().pageVo;
      this.loadIdeas();
    },
    loadIdeas() {
      this.tableLoading = true;
      getIdeaList(this.pageVo)
        .then(data => {
          this.ideas = data.records;
          this.pageVo.current = data.current;
          this.pageVo.pages = data.pages;
          this.pageVo.total = Number(data.total);
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    }
  },
  mounted() {
    this.loadIdeas();
  }
};
</script>

<style scoped>
.idea {
}
</style>
